Static website kit

Tell Kitty what you want.

Kitty pairs a lean website kit with a guided AI context. You don't need a finished specification: the AI asks questions, records decisions and builds the website with shared tokens, building blocks and rules.

Download Kitty Documentation

Why Kitty

A kit with principles — not a template grab bag.

Six principles are baked into every file. That's why everything fits together in the end, no matter who (or what) built the page.

No build step

Pure HTML, CSS and JS. Runs from a double-click and on any server — no Node, no deploy ritual, no version chaos.

Everything runs on tokens

Three brand colors form the base. Surfaces and hover tones are derived from them; text contrasts stay deliberate decisions that Kitty makes visible in the Styleguide and quality check.

Privacy built in

Self-hosted fonts, an optional consent module with prior blocking and a technical foundation for the contact form. External services are added only deliberately and per project.

Accessibility built in

A skip link, visible focus, keyboard operation, reduced motion and contrast checks create a helpful foundation. Kitty points to good standards without blocking deliberate decisions.

Thinks in sections

Reusable building blocks and neutral templates. New pages come from combining them, not from copy-paste chaos.

Guided AI context

Clear roles for rules, how it works and project decisions make Kitty machine-readable. This keeps an AI session consistent, and it asks before filling important gaps on its own.

0
Build dependencies in the core
1
Design system for every page
100%
static core

Ask, decide, build

You set the direction. Kitty guides the process.

The AI doesn't just work through a prompt. It clarifies the next sensible step, recommends a direction and records the project status before building with the kit's building blocks.

01

Describe the goal

A short sentence is enough to start. Unknown content and decisions are explicitly allowed to stay open.

02

Kitty clarifies and remembers

The AI asks the right questions and writes confirmed answers, assumptions and open points into the project memory.

03

Building in the system

Tokens, templates and components are combined into understandable files. Optional services stay recognizable as such.

“I have a logo and some initial text, but no page structure yet. Help me clarify the next sensible step.”

“This decision is confirmed. Record it in the project status and build just the first viewport for now.”

See how it works

The system

Turn one token, everything follows.

The look and feel runs on design tokens in a shared foundation. From three brand colors, Kitty derives surfaces, borders and hover tones. Text on brand surfaces stays a deliberate contrast decision that is checked right away.

Layout cleanly separates band width and content width: bands run full width, text stays aligned the same everywhere. A single class decides boxed or full-width.

To the Styleguide 
:root {
  --color-brand:   #ffd400;  /* primary signal color  */
  --color-brand-2: #175bd6;  /* second brand          */
  --content-max:   1160px;   /* content width         */
}

/* Kitty derives surfaces and hover tones.
   Text contrasts are chosen deliberately. */
Brand #ffd400
Text #171716
Section Tint #f6f6f4
“Understand first, then design. Decisions stay traceable, and the work stays within the shared system.”
— A Kitty principle

Get started

See what's inside.

Typography, column layouts and the complete kit — as living examples to click through.

To the Style Guide Documentation